<template>
    <div class="register">
        <div class="register_top" @click="$router.push('/login')">
            <div class="register_backIcon"></div>
        </div>
        <div class="register_title">
            <span>注册</span>
        </div>
        <div class="shop_user_form">

            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo">*</div>
                    <div class="sufl_t_test">手机号码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="11" type="text" v-model="loginName">
                </div>
            </div>
            
            <!-- <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo">*</div>
                    <div class="sufl_t_test">图片验证码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" type="text" v-model="vscode">
                    <div class="suf_l_imgCodeBtn" @click="e_changeImg">
                        <img class="suf_l_imgCodeBtn" :src="imgCode">
                    </div>
                </div>
            </div> -->
            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo">*</div>
                    <div class="sufl_t_test">短信验证码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="6" type="text" v-model="phoneCode">
                    <div class="suf_l_inputBtn" v-text="smsBtn" @click="e_sendSMS" />
                </div>
            </div>
            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo">*</div>
                    <div class="sufl_t_test">登录密码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="16" type="password" v-model="loginPwd">
                </div>
            </div>
            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo">*</div>
                    <div class="sufl_t_test">确认密码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="16" type="password" v-model="confirmloginPwd">
                </div>
            </div>
            <div class="s_u_f_label">
                <div class="suf_l_title">
                    <div class="sufl_t_logo"></div>
                    <div class="sufl_t_test">推荐码</div>
                </div>
                <div class="suf_l_inputCon">
                    <input class="suf_l_input" maxlength="6" type="text" v-model="popCode">
                </div>
            </div>
            <div class="suf_otherbtn reg_other">
                <span>（*为必填项）</span>
            </div>
            <div class="suf_subBtn" :disabled='isAttack' @click="e_register">
                <img class="suf_subBtnImg" :src="btnImg" alt="">
            </div>

        </div>
        <!-- 加载中 -->
        <div class="demo-spin-container" v-if="loadding">
            <Spin fix></Spin>
        </div>
    </div>
</template>

<script>
import RegisterBtn from '@imgs/register/register_btn.png'
import sha256 from 'js-sha256'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
export default {
	name: 'register',
	data() {
		return {
			imgCode: '',
			btnImg: RegisterBtn,
			loginName: '', //手机号用户名
			// vscode: '', //图片验证码
			phoneCode: '', //短信验证码
			loginPwd: '', //登录密码
			confirmloginPwd: '', //确认登录密码
			popCode: '', //推荐码
			smsBtn: '发送验证码', //发送验证码
			smdTimer: null, //发送验证码定时器
			isAttack: false, //仿连点
			loadding: false,
		}
	},

	components: {},

	computed: {},

	methods: {
		// 进入注册页面查看地址链接是否携带推荐码
		getPopCode() {
			let popCode = this.$route.query.popCode
			if (popCode) {
				this.popCode = popCode
			}
		},
		// ==================================图片验证码👇======================================//
		// 获取图片验证码
		getImgCode() {
			let r = Math.random().toString()
			let t = new Date().getTime().toString()
			let imgKey = (r + t).split('.')[1]
			sessionStorage.setItem('imgKey', imgKey)
			this.imgCode = vlink.imgCode + imgKey
		},
		// 点击图片验证码进行更换
		e_changeImg() {
			this.getImgCode()
		},
		// ==================================图片验证码👆======================================//

		// ==================================短信验证码👇======================================//
		// 发送短信验证码
		e_sendSMS() {
			if (this.smsBtn === '发送验证码') {
				this.beforeSendCheck()
			}
		},
		// 发送前检查
		beforeSendCheck() {
			let sendData = {
				username: this.loginName,
				// vscode: this.vscode,
			}
			if (sendData.username == '') {
				this.$Message.warning('请输入手机号')
				return
			}
			// if (sendData.vscode == '') {
			// 	this.$Message.warning('请输入图片验证码')
			// 	return
			// }
			//发送倒计时
			this.sendTimer()
			// 执行发送
			this.doSendSMS(sendData)
		},
		// 发送验证码倒计时
		sendTimer() {
			this.smsBtn = '60s'
			var counter = 59
			this.smdTimer = setInterval(() => {
				if (counter == 0) {
					this.smsBtn = '发送验证码'
					clearInterval(this.smdTimer)
				} else {
					this.smsBtn = counter + 's'
					counter--
				}
			}, 1000)
		},
		// 验证码执行发送
		doSendSMS(sendData) {
			this.loadding = true
			vpost(vlink.sign.smssend, sendData).then(re => {
				this.loadding = false
				if (re.status == 0) {
					this.$Message.success('验证码发送成功')
				} else {
					this.$Message.warning(re.msg)
					this.smsBtn = '发送验证码'
					clearInterval(this.smdTimer)
				}
			})
		},
		// ==================================短信验证码👆======================================//

		// ==================================执行注册👇=======================================//
		// 执行注册
		e_register() {
			this.beforeReisterCheck()
		},
		// 注册前检查
		beforeReisterCheck() {
			let registerData = {
				username: this.loginName,
				validateCode: this.phoneCode,
				password: sha256(this.loginPwd),
				confirmPassword: sha256(this.confirmloginPwd),
				parentRecommend: this.popCode
			}
			let regx = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/
			if (registerData.username == '') {
				this.$Message.warning('请输入手机号')
				return
			}
			if (registerData.validateCode == '') {
				this.$Message.warning('请输入短信验证码')
				return
			}
			if (this.loginPwd == '') {
				this.$Message.warning('请输入登录密码')
				return
			}
			if (!regx.test(this.loginPwd)) {
				this.$Message.warning('密码不少于6位，同时包含数字和字母')
				return
			}
			if (this.loginPwd != this.confirmloginPwd) {
				this.$Message.warning('两次密码输入不一致')
				return
			}
			this.doRegister(registerData)
		},
		// 执行注册
		doRegister(registerData) {
			this.isAttack = true
			this.loadding = true
			sonpost(vlink.sign.up, registerData).then(re => {
				this.isAttack = false
				this.loadding = false
				console.log(re)
				if (re.status == 0) {
					this.$Message.success('注册成功')
					this.$router.push('/login')
				} else {
					this.$Message.warning(re.msg)
				}
			})
		},
		// ==================================执行注册👇=======================================//
	},

	mounted() {
		// 获取推广码并填入注册项
		this.getPopCode()
		// 获取图片验证码
        // this.getImgCode()
    console.log(sha256('123456'))
	},
}
</script>
